<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="images/jquery.mobile-1.4.5.min.css">
        <script src="images/jquery-1.8.3.min.js"></script>
        <script src="images/jquery.mobile-1.4.5.min.js"></script>
    </head>
    <body>
<div data-role="page" id="pageone">
     <img src="images/2.jpg" style="width: 100%;height: 100%; position: fixed" id="m"/>
</div>
<div data-role="page" id="pagetwo">
  <img src="images/4.png" style="width: 100%;height: 100%;position: fixed" id="m1"/>
</div>
<div data-role="page" id="pagethree">
  <img src="images/3.jpg" style="width: 100%;height: 100%;position: fixed" id="m2"/>
</div>
<script>
$(function(){
    $("#m").bind("swipeleft",function(){
        $.mobile.changePage("#pagetwo");
    });
 $("#m1").bind("swipeleft",function(){
        $.mobile.changePage("#pagethree");
    });
    $("#m1").bind("swiperight",function(){
        $.mobile.changePage("#pageone", {transition:"slide",reverse:true}, true, true);
    });
  $("#m2").bind("swiperight",function(){
        $.mobile.changePage("#pagetwo", {transition:"slide",reverse:true}, true, true);
    });
});
</script>
    </body>
</html>
